<template>
    <div class="youxixinxi-detail" v-loading="loading">
        <div>
            <e-container>
                <e-module-widget-title title="游戏详情">
                    <div class="">
                        <div class="goods-info clearfix">
                            <div class="gallery-list">
                                <e-shangpinban :images="map.tupian"></e-shangpinban>
                            </div>
                            <div class="goods-right-content">
                                <h3 class="title" v-text="map.youximingcheng"></h3>
                                <div class="descount">
                                    <div>
                                        <span class="name"> 游戏编号： </span>
                                        <span class="val"> {{ map.youxibianhao }} </span>
                                    </div>
                                    <div>
                                        <span class="name"> 分类： </span>
                                        <span class="val"> <e-select-view module="youxifenlei" :value="map.fenlei" select="id" show="fenleimingcheng"></e-select-view> </span>
                                    </div>
                                    <div>
                                        <span class="name"> 浏览量： </span>
                                        <span class="val"> {{ map.liulanliang }} </span>
                                    </div>
                                    <div>
                                        <span class="name"> 大小： </span>
                                        <span class="val"> {{ map.daxiao }} </span>
                                    </div>
                                    <div>
                                        <span class="name"> 厂商： </span>
                                        <span class="val">
                                            <e-select-view module="changshangxinxi" :value="map.changshang" select="id" show="gongsiquanming"></e-select-view>
                                        </span>
                                    </div>
                                    <div>
                                        <span class="name"> 发行日期： </span>
                                        <span class="val"> {{ map.faxingriqi }} </span>
                                    </div>
                                </div>

                                <el-badge :value="shoucangCount" style="margin-right: 15px">
                                    <el-button type="primary" v-if="!is_shoucang" @click="onShoucangChange" icon="el-icon-star-off"> 收藏 </el-button>
                                    <el-button type="danger" v-else icon="el-icon-star-on" @click="onShoucangChange"> 取消收藏 </el-button>
                                </el-badge>
                            </div>
                        </div>
                        <div class="goods-content" v-html="map.youxixiangqing"></div>
                    </div>
                </e-module-widget-title>
            </e-container>
        </div>
        <div>
            <e-container>
                <e-module-widget-title title="评论">
                    <e-comments module="youxixinxi" :lists="comments" :biaoti="map.youximingcheng" user="yonghu" headimg="touxiang" :is-reply="false" name="xingming"> </e-comments>
                </e-module-widget-title>
            </e-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss"></style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";
    import jdk from "@/utils/extend";
    export default {
        data() {
            return {
                loading: false, // 加载

                is_shoucang: false,
                shoucangCount: 0,

                map: {
                    youxibianhao: "",
                    fenlei: "",
                    youximingcheng: "",
                    liulanliang: "",
                    tupian: "",
                    daxiao: "",
                    changshang: "",
                    faxingriqi: "",
                    youxixiangqing: "",
                },
                comments: [],
            };
        },
        props: {
            id: {
                type: [String, Number],
                required: true,
            },
        },
        watch: {
            id: {
                handler() {
                    this.loadDetail();
                },
                immediate: true,
            },
        },
        computed: {},
        methods: {
            loadDetail() {
                if (this.loading) return;
                this.loading = true;
                this.$get(api.youxixinxi.webdetail, {
                    id: this.id,
                })
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
            onShoucangChange() {
                if (this.loading) return;
                this.loading = true;
                var map = this.map;
                this.$post("shoucanginsert.do", {
                    biao: "youxixinxi",
                    xwid: map.id,
                    biaoti: map.youximingcheng,
                })
                    .then((res) => {
                        if (res.code == 0) {
                            if (this.is_shoucang) {
                                this.$message.success("已取消收藏");
                                this.is_shoucang = false;
                                this.shoucangCount--;
                            } else {
                                this.$message.success("已收藏");
                                this.is_shoucang = true;
                                this.shoucangCount++;
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {},
        mounted() {},
        destroyed() {},
    };
</script>
